import React from "react";
import {DatePicker, Form, Input, Select, Switch} from "antd";
import { useAppSelector } from "../../../../redux/hooks";
import {getCityList} from "../../../../redux";

const { Option } = Select;
const dateFmt = 'YYYY 年 MM 月'

interface PropsType {}

export const BasicInfoForm: React.FC<PropsType> = () => {
    const cityList = useAppSelector(getCityList)

    return <>
        <Form.Item label={'姓名'} name={'name'}>
            <Input placeholder={'填写姓名'} />
        </Form.Item>
        <Form.Item label={'姓别'} name={'gender'}>
            <Select
                placeholder={'选择性别'}
                allowClear={true}
            >
                <Option value={'男'}>男</Option>
                <Option value={'女'}>女</Option>
                <Option value={'其他'}>其他</Option>
            </Select>
        </Form.Item>
        <Form.Item label={'年龄'} name={'age'}>
            <Input placeholder={'输入年龄'} ></Input>
        </Form.Item>
        <Form.Item label={'所在地'} name={'location'}>
            <Select
                showSearch={true}
                placeholder={'在哪个城市'}
                allowClear={true}
                filterOption={(input, option) => {
                    return (option?.value as string ?? '').toLowerCase().includes(input.toLowerCase())
                }}
            >
                {
                    cityList.map(city => ( <Option key={city} value={city}>{city}</Option> ))
                }
            </Select>
        </Form.Item>
        <Form.Item label={'手机号'} name={'phoneNumber'}>
            <Input placeholder={'填写手机号'} ></Input>
        </Form.Item>
        <Form.Item label={'邮箱'} name={'email'}>
            <Input placeholder={'填写邮箱'} ></Input>
        </Form.Item>
        <Form.Item label={'参加工作时间'} name={'inWorkDate'} >
            {/*<DatePicker picker={'month'} defaultValue={useFormInstance().getFieldValue('inWorkDate')}   format={dateFmt}/>*/}
            <DatePicker picker={'month'}  format={dateFmt}/>
        </Form.Item>
        <Form.Item label={'民族'} name={'ethnic'}>
            <Input placeholder={'汉'} ></Input>
        </Form.Item>
        <Form.Item label={'政治面貌'} name={'thePoliticalLandscape'}>
            <Select
                placeholder={'政治面貌'}
                allowClear={true}
            >
                <Option value={'中共党员'}>中共党员</Option>
                <Option value={'中共预备党员'}>中共预备党员</Option>
                <Option value={'共青团员'}>共青团员</Option>
                <Option value={'民主党派人士'}>民主党派人士</Option>
                <Option value={'群众'}>群众</Option>
            </Select>
        </Form.Item>
        <Form.Item label={'体重'} name={'weight'}>
            <Input suffix={'Kg'} placeholder={'65'} ></Input>
        </Form.Item>
        <Form.Item label={'身高'} name={'height'}>
            <Input suffix={'cm'} placeholder={'175'} ></Input>
        </Form.Item>
        <Form.Item label={'显示头像'} name={'displayAvatar'} valuePropName={'checked'}>
            <Switch checkedChildren='显示' unCheckedChildren='隐藏' ></Switch>
        </Form.Item>
    </>

}
